<template>
    <div class="box">
        <bycicle-map-vue @callShowParkInfo="handleShowParkInfo" :busMarkers="busMarkers" :subwayMarkers="subwayMarkers"
                         :bikeMarkers="bikeMarkers"
                         @calledMoved="handlerMoved" @calledMoving="handlerMoving"></bycicle-map-vue>
        <div class="anchor-box" style="padding-bottom: 40px;">
            <img alt="图片" width="50" :class="{ 'animate': isAnimating }" :src="anchorPoint"/>
        </div>
        <el-card v-if="showParkInfo" class="park-info-box">
            <el-row>
                <el-col :span="22">
                    <div class="park-info-title">{{ parkInfo.name }}</div>
                </el-col>
                <el-col :span="2">
                    <div class="btn-card-closed" @click="showParkInfo = false">x</div>
                </el-col>
            </el-row>
            <div class="bike-info-box">
                <br/>
                <template v-for="item in bikeInfo">
                    <div :key="item.id" style="padding-bottom: 10px;padding-top: 10px">
                        <el-row type="flex" justify="center" align="middle">
                            <el-col :span="6">
                                <div class="bycicle-img" >
                                    <img src="@/assets/img/icon/icon_bic.png" alt="">
                                </div>
                            </el-col>
                            <el-col :span="18">
                                <el-row type="flex" align="middle">
                                    <el-col :span="12">
                                        <div class="msg">
                                            <span>编号:</span>
                                            <a class="bycicle-id">{{ item.c_bikeno }}</a>
                                        </div>
                                        <div class="msg">
                                            <span>可骑行:</span>
                                            <a class="bycicle-id">{{ item.mileage }}KM</a>
                                        </div>
                                        <div class="msg">
                                            <span>单车平台: {{ item.bike_plateform }}</span>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-progress type="circle" class="pro" :width="50" :stroke-width="5"
                                                     :percentage="parseFloat(item.power)" ></el-progress>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-tag :type="parseFloat(item.power)>20? 'success' :'warning'">{{ parseFloat(item.power)>20? '正常' :'低电量' }}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>
                    <el-divider/>
                </template>
            </div>
        </el-card>
        <div class="tools-box">
            <el-dropdown :hide-on-click="false">
                <el-button type="normal">
                    工具箱<i class="el-icon-setting el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <el-checkbox
                                v-model="checkedUserDataTool">用户数据总览
                        </el-checkbox>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <el-checkbox
                                v-model="checkedDataBycicleTool">平台单车统计
                        </el-checkbox>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <el-checkbox v-model="checkedTimeTool">时间段用车频次统计</el-checkbox>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <el-checkbox v-model="checkedDestTool">用户目的地偏好</el-checkbox>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="transfer-menu-box">
            <transfer-menu-view @calledBikeParkChanged="bikeChagedListener" @calledBusChanged="busChangedListener"
                                @calledSubwayChanged="subwayChangedListener"/>
        </div>
        <data-statistics-bycicle class="data-statistics-bycicle" @has-closed=" checkedDataBycicleTool = false"
                                 v-if="checkedDataBycicleTool"></data-statistics-bycicle>
        <destination-preference v-if="checkedDestTool" @close="checkedDestTool = false"></destination-preference>
        <time-frequency v-if="checkedTimeTool" @close=" checkedTimeTool = false"></time-frequency>
        <user-data-overview v-if="checkedUserDataTool" @close="checkedUserDataTool = false"></user-data-overview>
    </div>

</template>

<script>
import LOCAL from '@/main'
import API from '@/utils/request'
import BycicleMapVue from '@/components/data-source/BycicleMap.vue'
import DataStatisticsBycicle from '@/components/data-source/DataStatisticsBycicle.vue'
import DestinationPreference from '@/components/data-source/DestinationPreference.vue'
import TimeFrequency from '@/components/data-source/TimeFrequency.vue'
import UserDataOverview from '@/components/data-source/UserDataOverview.vue'
import TransferMenuView from '@/components/manage/data-page/item/TransferMenuView.vue'
// import LocationDetails from '@/components/data-source/LocationDetails.vue'
export default {
    data() {
        return {
            LOCAL,
            parkInfo: {},
            bikeInfo: [],
            showParkInfo: false,
            checkedDataBycicleTool: false,
            checkedUserDataTool: false,
            checkedTimeTool: false,
            checkedDestTool: false,
            isAnimating: true,
            anchorPoint: require("@/assets/img/icon/icon_anchor_point.png"),
            busMarkers: [],
            subwayMarkers: [],
            bikeMarkers: [],
            center: {},
            dataSourceTag: {
                subway: false,
                bus: false,
                bike: true
            }
        }
    },
    components: {
        BycicleMapVue,
        DataStatisticsBycicle,
        DestinationPreference,
        TimeFrequency,
        UserDataOverview,
        TransferMenuView,
        // LocationDetails
    },
    methods: {
        handlerMoved(e) {
            this.isAnimating = false;
            this.center = e.target.getCenter();

            this.queryParks(this.center);
        },
        handlerMoving() {
            this.isAnimating = true;
            // console.log(e);
        },
        queryParks(data) {
            var reqData = {
                lat: data.lat,
                lng: data.lng
            }

            if (this.dataSourceTag.bike)
                API.getBikeParks(reqData, ((res) => {
                    if (res.status === 200) {
                        this.bikeMarkers = res.data;
                    } else {
                        this.$message({
                            message: '网络异常,请稍后再试',
                            type: 'error'
                        })
                    }
                }));

            if (this.dataSourceTag.bus)
                API.getBusSite(reqData, ((res) => {
                    if (res.status === 200) {
                        this.busMarkers = res.data;
                    } else {
                        this.$message({
                            message: '网络异常,请稍后再试',
                            type: 'error'
                        })
                    }
                }));

            if (this.dataSourceTag.subway)
                API.getSubway(reqData, ((res) => {
                    if (res.status === 200) {
                        this.subwayMarkers = res.data;
                    } else {
                        this.$message({
                            message: '网络异常,请稍后再试',
                            type: 'error'
                        })
                    }
                }));

        },
        busChangedListener(data) {
            this.dataSourceTag.bus = data;
            if (!data) {
                this.busMarkers = [];
            }
        },
        bikeChagedListener(data) {
            this.dataSourceTag.bike = data;
            if (!data) {
                this.bikeMarkers = [];
            }
        },
        subwayChangedListener(data) {
            this.dataSourceTag.subway = data;
            if (!data) {
                this.subwayMarkers = [];
            }
        },
        handleShowParkInfo(data, bikes) {
            this.showParkInfo = true;
            this.parkInfo = data;
            this.bikeInfo = bikes;
        }
    },
    mounted() {
        LOCAL.CHI = false;
        LOCAL.MAIN_ACTION_INDEX = 0;
        LOCAL.TITLE_INFO = "看板"
    }
}
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    background-color: #000000;
    position: relative;
}
.park-info-title{
    text-align: left;
    font-size: 24px;
    color: #1c2234;
}
.btn-card-closed {
    cursor: pointer;
    background-color: #e3e3e3;
    border-radius: 15px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    color: white;
}

.transfer-menu-box {
    position: absolute;
    float: left;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.anchor-box {
    position: absolute;
    top: 50%;
    left: 50%;
    float: left;
    transform: translate(-50%, -50%);
}
.pro {
    margin-top: 10px;
}
.bycicle-id {
    margin-left: 10px;
}
.bycicle-img {
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    background-color: #e8e8e8;
    border-radius: 50%;
}
.park-info-box {
    position: absolute;
    float: left;
    top: 40%;
    left: 65%;
    transform: translate(-50%, -50%);
    width: 460px;
    max-height: 400px;
    background-color: #ffffff;
    border-radius: 10px;
    overflow-y: scroll;
    overflow-x: none;
}

.tools-box {
    position: absolute;
    float: right;
    top: 20px;
    right: 20px;
}

.msg{
    text-align: left;
    line-height: 30px;
}
.animate {
    animation: jump 0.5s infinite;
}

@keyframes jump {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}
</style>